<template>
  <div>

    <!-- Start blog-posts Area -->
    <section class="blog-posts-area section-padding">
      <div class="container">
        <div class="row">
          <div class="col-lg-8 post-list blog-post-list">
            <template v-if="articles.length!=0">
              <div class="single-post" v-for="(item, index)  in articles" :key="index">
                <img class="img-fluid" :src="'assets/images/p'+(index%3)+'.jpg'" alt="">
                <ul class="tags">
                  <li><a href="#">Ou Henry,</a></li>
                  <li><a href="#">{{item.category}}, </a></li>
                  <li><a href="#">{{item.tag}}</a></li>
                </ul>
                <a href="javascript:void(0);" @click="viewDetail(item.id)">
                  <h2>
                    {{item.title}}
                  </h2>
                </a>
                <p>
                  {{item.introduction}}
                </p>
                <div class="bottom-meta">
                  <div class="user-details row align-items-center">
                    <div class="comment-wrap col-lg-6">
                      <ul>
                        <li><a href="#"><span class="lnr lnr-heart"></span> {{item.views}} views</a></li>
                        <li><a href="#"><span class="lnr lnr-bubble"></span> {{item.views}} Comments</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </template>
            <template v-else>
              <div class="single-post">
                <img class="img-fluid" src="assets/images/p0.jpg" alt="">
                <ul class="tags">
                  <li><a href="#">Ou Henry, </a></li>
                  <li><a href="#">占位, </a></li>
                  <li><a href="#">占位</a></li>
                </ul>
                <a href="#">
                  <h2>
                    没有您需要的信息！请重新检索！
                  </h2>
                </a>
                <p class="text-center">
                  旭日兮明净，初阳兮惹怜。<br />
                  昭昭兮启明，荡荡兮沉绵。<br />
                  治世兮靖平，垂拱兮安澜。<br />
                  源远兮零丁，流长兮常谈。<br />
                  流光兮永逝，往日兮难全。<br />
                </p>
                <div class="bottom-meta">
                  <div class="user-details row align-items-center">
                    <div class="comment-wrap col-lg-6">
                      <ul>
                        <li><a href="#"><span class="lnr lnr-heart"></span> 4 views </a></li>
                        <li><a href="#"><span class="lnr lnr-bubble"></span> 06 Comments</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>
          <div class="col-lg-4 sidebar">
            <div class="single-widget search-widget">
              <!-- 禁用form表单跳转-->
              <form class="example" style="margin:auto;max-width:300px" onsubmit="return false">
                <input type="text" placeholder="请搜索……" name="search2" onfocus="this.placeholder = ''"
                  onblur="this.placeholder = '请搜索……'" required v-model="pageSearch.keyWord">
                <button type="submit" @click="keyWordSearch()"><i class="fa fa-search"></i></button>
              </form>
            </div>

            <div class="single-widget category-widget">
              <h4 class="title">文章分类</h4>
              <ul>
                <li v-for="(item, index) in countCategoryArchive" :key="item.code">
                  <a href="#" @click="screenCategory(index)" class="justify-content-between align-items-center d-flex">
                    <h6>{{ item.archive }}</h6> <span>{{item.count}}</span>
                  </a>
                </li>
              </ul>
            </div>

            <div class="single-widget recent-posts-widget">
              <h4 class="title">最近发布</h4>
              <div class="blog-list">
                <div class="single-recent-post d-flex flex-row" style="margin-top: 10px;"
                  v-for="(item, index)  in recentPosts" :key="index">
                  <div class="recent-thumb">
                    <img class="img-fluid" :src="'assets/images/r'+(index%4)+'.jpg'" alt="">
                  </div>
                  <div class="recent-details" @click="viewDetail(item.id)">
                    <a href="javascript:void(0);">
                      <h4>
                        {{item.title}}
                      </h4>
                    </a>
                    <p>
                      {{item.createTime}}
                      <!--这里需要计算多久时间之前 hours ago -->
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <div class="single-widget category-widget">
              <h4 class="title">历史档案</h4>
              <ul>
                <li v-for="(item, index) in countMonthArchive" :key="item.code">
                  <a href="#" @click="screenMoth(index)" class="justify-content-between align-items-center d-flex">
                    <h6>{{ item.archive }}</h6> <span>{{item.count}}</span>
                  </a>
                </li>
              </ul>
            </div>

            <div class="single-widget tags-widget">
              <h4 class="title">文章标签</h4>
              <ul>
                <li><a href="#">历史</a></li>
                <li><a href="#">艺术</a></li>
                <li><a href="#">食物</a></li>
                <li><a href="#">技术</a></li>
              </ul>
            </div>

          </div>
        </div>
      </div>
    </section>
    <!-- End blog-posts Area -->
  </div>
</template>

<script>
  import {
    getRequest,
    serchArticlePageData
  } from '../api/Article.js'

  export default {
    data() {
      return {
        // categories: [], // 文章分类数组
        articles: [], //初始化以及筛选后主页框显示文章
        recentPosts: [], //最近发布文章
        countCategoryArchive: [], //带统计信息的文章
        pageCategoryArchive: {
          pagesize: 10,
          total: 0,
          currentPage: 1,
          archive: 1
        }, //带统计信息的文章
        countMonthArchive: [], //带统计信息的文章
        pageMonthArchive: {
          pagesize: 10,
          total: 0,
          currentPage: 1,
          archive: 2
        }, //带统计信息的文章

        pagesize: 6,
        total: 5,
        currentPage: 1,

        pageSearch: {
          categoryCode: '',
          releaseMonth: '',
          keyWord: '',
          searchType: '3'
        },
      }
    },
    mounted() {
      var _this = this
      // 初始化分类
      // getRequest('/manage/web/findArticleCategory')
      //   .then(function(response) {
      //     _this.categories = response.data.data
      //   })
      //   .catch(function(error) {
      //     console.log(error);
      //   });
      // 初始化随机文章
      serchArticlePageData(_this.currentPage, _this.pagesize, _this.pageSearch).then(function(response) {
          if (response.status == 200 && response.data.code == 200) {
            _this.total = response.data.data.total
            _this.articles = response.data.data.rows;
            console.log(_this.articles)
          }
        })
        .catch(function(error) {
          console.log(error);
        });
      // 初始化最近文章
      let recent = _this.pageSearch;
      recent.searchType = 1;
      serchArticlePageData(1, 4, recent).then(function(response) {
          if (response.status == 200 && response.data.code == 200) {
            _this.recentPosts = response.data.data.rows;
            console.log(_this.recentPosts)
          }
        })
        .catch(function(error) {
          console.log(error);
        });

      // 初始化统计数据
      this.countMonthArchiveData();
      this.countCategoryArchiveData();
    },
    methods: {
      // 按照分类筛选数据
      screenCategory(index) {
        console.log(index);
        this.pageSearch.categoryCode = this.countCategoryArchive[index].code;
        this.pageSearch.searchType = 1;
        this.searchData(this)
      },
      screenMoth(index) {
        console.log(index);
        this.pageSearch.releaseMonth = this.countMonthArchive[index].code;
        this.pageSearch.searchType = 1;
        this.searchData(this)
      },
      keyWordSearch() {
        if (!this.pageSearch.keyWord) {
          return
        }
        this.pageSearch.categoryCode = null;
        this.pageSearch.searchType = 1;
        console.log(this.pageSearch);
        this.searchData(this)
      },

      searchData: function(_this) {
        serchArticlePageData(_this.currentPage, _this.pagesize, _this.pageSearch)
          .then(function(response) {
            if (response.status == 200 && response.data.code == 200) {
              _this.total = response.data.data.total
              _this.articles = response.data.data.rows;
              console.log(_this.articles)
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      },
      countMonthArchiveData() {
        var _this = this
        getRequest('/manage/web/findArticleCount',
            _this.pageMonthArchive
          )
          .then(function(response) {
            _this.countMonthArchive = response.data.data.rows;
            _this.pageMonthArchive.total = response.data.data.total
            _this.pageMonthArchive.currentPage++
          })
          .catch(function(error) {
            console.log(error);
          });
      },
      countCategoryArchiveData() {
        var _this = this
        getRequest('/manage/web/findArticleCount',
            _this.pageCategoryArchive
          )
          .then(function(response) {
            _this.countCategoryArchive = response.data.data.rows;
            _this.pageCategoryArchive.total = response.data.data.total
            _this.pageCategoryArchive.currentPage++
          })
          .catch(function(error) {
            console.log(error);
          });
      },
      viewDetail(id) {

        console.log(id);
        this.$router.push({
          name: 'blogDetail',
          params: {
            id: id,
          }
        });

      }

    }

  }
</script>
